import React, { Component } from 'react'
import { NavBar } from "antd-mobile"
import SearchInput from "../searchInput/searchInput"
import "./category.scss";
import myaxios from "../../utils/myaxios"
import { Toast } from 'antd-mobile';

export default class category extends Component {
  state = {
    categories: [], // 返回的菜单数据
    categories_content: [],//右边菜单渲染的数据
    select_index: 0 //当前选中的左边菜单
  }
  //获取分类菜单的数据
  getCategories = (params) => {
    myaxios.get("categories").then(res => {
      console.log(res);
      this.setCategories(res)
    }).catch(err => {
      console.log(err);
    })
  }
  //设置分类菜单的数据
  //is_storage 代表是否之前已经缓存过  true 缓存了
  setCategories = (res,is_storage) => {
    // 缓存的数据
    let categories_cache = {}
    if (is_storage) {
      //直接获取本地缓存的数据即可
      categories_cache = JSON.parse( localStorage.getItem("categories_cache"))
    } else {
      categories_cache = {
        date: Date.now(),
        categories: res
      }
    }

    //缓存到本地
    localStorage.setItem("categories_cache", JSON.stringify(categories_cache))
    this.setState({ 
      categories: res,
      categories_content: res[0].children
    })
  }

  componentDidMount() {
    //进来的时候 先判断本地的缓存是否过期 如果没有过期直接获取本地的缓存
    let categories_cache = localStorage.getItem("categories_cache")
    //如果本地缓存不为空
    if (categories_cache && JSON.parse(categories_cache).date) {
      //当前时间
      let current_time = Date.now()
      //本地缓存拿时间 也就是我们本来存储的时间、
      let storage_time = JSON.parse(categories_cache).date
      //比较两个时间
      if (current_time - storage_time > 60 * 60 * 1000) {
        //如果超过一个小时 就过期
        this.getCategories()
      } else {
        //缓存没有过期
        //第二个代表是否已经缓存过了
        this.setCategories(JSON.parse(categories_cache).categories, true)
      }
    } else {
      this.getCategories()
    }

  }
  //左边
  handleClick = (e) => {
    /* 点击获取当前的下标 */
    // console.log(e.target.getAttribute("data-index"));
    let select_index = e.target.getAttribute("data-index")
    this.setState({
      select_index: parseInt(select_index),
      // 内容是对应的下标后的children
      categories_content: this.state.categories[select_index].children
    })
  }
//右边图片点击
handleProductItemClick =(e) => {
  let cid = e.target.getAttribute("data-index")
  // console.log(cid);
  // console.log(this.props);
  this.props.history.push("/goodList?cid="+cid)
}

  render() {
    return (
      <div className="yg-category">
        {/* 首页导航开始 */}
        <div className="yg-category-nav">
          <NavBar className="category-nav">商品分类</NavBar>
        </div>
        {/* 首页导航结束 */}
        {/* 搜索框开始 */}
        <div className="yg-category-searchFor">
          <SearchInput></SearchInput>
        </div>
        {/* 搜索框结束 */}
        {/* 分类内容开始 */}
        <div className="yg-category-content">
          {/* 左边内容渲染 */}
          {/* 利用冒泡的原理给子元素添加点击事件 */}
          <div className="category-content-left" onClick={this.handleClick}>
            {
              this.state.categories.map((v, index) => {
                return (
                  /* data-index 是自定义的 用来处理当前点击的那个商品 */
                  <div data-index={index} className={this.state.select_index === index ? "active content-left-item" : "content-left-item"} key={v.cat_id}>
                    {v.cat_name}
                  </div>
                )
              })
            }
          </div>
          {/* 右边内容渲染 */}
          <div className="category-content-right">
            {this.state.categories_content.map(v => {
              // console.log(v);
              return (
                <div className="content-right-item" key={v.cat_id}>
                  {/* 二级菜单开始 */}
                  <div className="rigth-item-title">
                    {"/"}
                    {v.cat_name}
                    {"/"}
                  </div>
                  {/* 二级菜单结束 */}
                  {/* 产品列表开始 */}
                  <div className="product-list" >
                    {
                      v.children && v.children.map(v => {
                        return <div className="product-list-item" key={v.cat_id} data-index={v.cat_id}>
                          <div className="imagerWrapper"  >
                            <img  onClick={this.handleProductItemClick} src={v.cat_icon} data-index={v.cat_id} alt="" />
                          </div>
                          <div onClick={this.handleProductItemClick} className="item-title" data-index={v.cat_id} >
                            {v.cat_name}
                          </div>
                        </div>
                      })
                    }
                  </div>
                  {/* 产品列表结束 */}
                </div>
              )
            })}
          </div>
        </div>
        {/* 分类内容结束 */}

      </div>
    )
  }
}
